<template>
<div id="order-list">
    <div id="search">
        <div class="search-group">
            <input type="search" class='inp-search' v-model="searchVal">
            <my-button 
                type='search' 
                class="search" 
                @click.native='handleClickSearchOrders'
            >搜索</my-button>
        </div>
    </div>
    <div class="div-table-layout">
        <my-table :list='partOfOrderList'>
            <template v-slot:th>
                <th 
                    scope='col' 
                    v-for='th in thList' 
                    :key='th' 
                    :title='th' 
                    class='th'
                >{{th}}</th>
            </template>
            <template v-slot:td='{td, index}'>
                <td class='td'>{{index}}</td>
                <td :title='td.order_number' class='td'>
                    {{td.order_number}}
                </td>
                <td class='td'>{{td.order_price}}</td>
                <td class='td'>
                    <span 
                        :class="['is-pay', Number(td.pay_status) 
                            ? 'pay-true' : 'pay-false'
                        ]"
                    >{{Number(td.pay_status) ? '已付款' : '未付款'}}</span>
                </td>
                <td class='td'>{{td.is_send}}</td>
                <td :title='td.create_time' class='td'>
                    {{td.create_time | formatTime}}
                </td>
                <td class='td'>
                    <div class="btn-group">
                        <my-button 
                            type='edit' 
                            link 
                            :to="{name: 'modifyAddress', params: {
                                orderNumber: td.order_number
                            }}"
                            title='修改订单地址'
                        >编辑</my-button>
                        <my-button
                            link
                            :to="{name: 'logisticsProgress', params: {
                                orderNumber: td.order_number
                            }}"
                        >物流进度</my-button>
                    </div>
                </td>
            </template>
        </my-table>
    </div>
    <my-paging 
        :total='order_data_total' 
        :pagetotal='newPartOfOrderListLen' 
        :page.sync='newPage' 
        :count.sync='newCount' 
        :pagenum='newOrderPageTotal' 
    ></my-paging>
</div>
</template>

<script>
import { Local, utils } from '../../common/index'
import { ORDER_LIST } from '../../config/localConstant'
import { messageTip } from '../JS'
import { 
    getOrderList, 
    searchOrders 
} from '../../config/data'
export default {
    name: 'orderList',
    data() {
        return {
            searchVal: '',
            /* --order-- */
            order_page_number: 1,
            order_page_count: 2,
            order_page_total: 0,
            order_data_total: 0,
            partOfOrderList: [],
            /* --order-- */
            pret: 0
        }
    },
    created() {
        this.getOrderListData()
    },
    methods: {
        async handleClickSearchOrders() {
            let nowt = Number(Date.now())
            if(nowt - this.pret < 1000) {
                messageTip({content: "太快了，受不了啦！！"})
                return;
            }
            this.pret = nowt
            this.searchVal = this.searchVal.replace(/\s/g, '')
            if(!this.searchVal) return;
            let result = await searchOrders({
                msg: this.searchVal
            })
            let { msg } = Local.get(ORDER_LIST.KEY)
            msg = msg ? msg : {}
            let pageNumber = msg[ORDER_LIST.SELECTED_PAGE_NUMBER]
            let pageCount = msg[ORDER_LIST.SELECTED_PAGE_OF_COUNT]
            if(result.data.order?.length === 1) {
                messageTip({content: "搜索成功"})
                this.partOfOrderList = result.data.order
                this.order_data_total = result.data.order.length
                this.order_page_total = Math.ceil(this.order_data_total / pageCount) || 1
                this.order_page_number = 1
                this.order_page_count = 10
            } else {
                messageTip({content: '暂无查找数据 `' + this.searchVal + '`'})
            }
        },
        async getOrderListData() {
            let { msg } = Local.get(ORDER_LIST.KEY)
            msg = msg || {}
            const pageNumber = msg[ORDER_LIST.SELECTED_PAGE_NUMBER]
            const pageCount = msg[ORDER_LIST.SELECTED_PAGE_OF_COUNT]
            let result = await getOrderList({
                pageNum: pageNumber || this.order_page_number,
                pageCount: pageCount || this.order_page_count,
            })
            let {
                total, page, count, pageTotal, currPageData
            } = result.data
            this.order_page_number = page
            this.order_page_count = count
            this.order_page_total = pageTotal
            this.order_data_total = total
            this.partOfOrderList = currPageData
        }
    },
    computed: {
        thList() {
            return ['#', '订单编号', '订单价格', '是否付款', '是否发货', '下单时间', '操作'];
        },
        newPartOfOrderListLen() {
            return this.partOfOrderList.length;
        },
        newOrderPageTotal() {
            return this.order_page_total;
        },
        newPage: {
            get() {
                let { msg } = Local.get(ORDER_LIST.KEY)
                msg = msg ? msg : {}
                this.order_page_number = msg[ORDER_LIST.SELECTED_PAGE_NUMBER] || 1
                return this.order_page_number;
            },
            set(val) {
                this.order_page_number = Number(val)
                let { msg } = Local.get(ORDER_LIST.KEY)
                msg = msg ? msg : {}
                msg[ORDER_LIST.SELECTED_PAGE_NUMBER] = this.order_page_number
                Local.set(ORDER_LIST.KEY, msg)
                this.getOrderListData()
            }
        },
        newCount: {
            get() {
                let { msg } = Local.get(ORDER_LIST.KEY)
                msg = msg ? msg : {}
                return msg[ORDER_LIST.SELECTED_PAGE_OF_COUNT] || this.order_page_count;
            },
            set(val) {
                this.order_page_count = Number(val)
                let { msg } = Local.get(ORDER_LIST.KEY)
                msg = msg ? msg : {}
                msg[ORDER_LIST.SELECTED_PAGE_OF_COUNT] = this.order_page_count
                Local.set(ORDER_LIST.KEY, msg)
                this.getOrderListData()
            }
        }
    },
    filters: {
        formatTime(val) {
            let ct = new Date(Number(val+'000'))
            const obj = {
                y: ct.getFullYear(),
                m: ct.getMonth() + 1,
                d: ct.getDate(),
                h: ct.getHours(),
                mm: ct.getMinutes(),
                s: ct.getSeconds()
            }
            for (const key in obj) {
                obj[key] = utils.addZero(obj[key])
            }
            return `${obj.y}-${obj.m}-${obj.d} ${obj.h}:${obj.mm}:${obj.s}`;
        }
    }
}
</script>

<style scoped>
#order-list {
    height: 100%;
}
#search {
    display: flex;
    align-items: center;
    width: 100%;
    height: 50px;
    line-height: 50px;
}
.search-group {
    display: flex;
    height: 30px;
    line-height: 30px;
    border: 1px solid #cecece;
    border-radius: 5px;
}
.inp-search {
    height: 26px;
    line-height: 26px;
    padding: 2px 6px;
    border: none;
    outline: none;
    border-radius: 5px 0 0 5px;
    font-size: 18px;
}
.search {
    margin-top: -1px;
    margin-right: -1px;
    border: none;
    border-radius: 0 5px 5px 0;
}
.div-table-layout {
    height: calc(100% - 100px);
}
.th:nth-of-type(1), 
.td:nth-of-type(1) {
    width: 64px;
}
.th:nth-of-type(2), 
.td:nth-of-type(2) {
    width: 200px;
}
.th:nth-of-type(3), 
.td:nth-of-type(3), 
.th:nth-of-type(4), 
.td:nth-of-type(4), 
.th:nth-of-type(5), 
.td:nth-of-type(5) {
    width: 90px;
}
.th:nth-of-type(6), 
.td:nth-of-type(6) {
    width: 140px;
}
.th:nth-of-type(7), 
.td:nth-of-type(7) {
    width: 160px;
}
.is-pay {
    display: block;
    width: 64px;
    height: 32px;
    text-align: center;
    line-height: 32px;
    margin: 0 auto;
    box-sizing: border-box;
}
.pay-false {
    color:  rgba(255, 41, 41, 0.8);
    border: 1px solid rgba(255, 41, 41, 0.8);
    background-color: rgba(255, 103, 103, 0.2);
}
.pay-true {
    color:  rgba(0, 218, 83, 0.8);
    border: 1px solid rgba(0, 218, 83, 0.8);
    background-color: rgba(119, 252, 92, 0.2);
}
.btn-group {
    display: flex;
    align-items: center;
    justify-content: center;
}
.btn-group :nth-of-type(1) {
    margin-right: 12px;
}
</style>